<template>
    <div class="personRouter-container">
        <div id="tabbar-with-map" class="mui-control-content">
            <div class="title">
                <div class="photo" @click="sheetVisible=true">
                    <mt-actionsheet
                            :actions="actions"
                            v-model="sheetVisible">
                    </mt-actionsheet>
                </div>
            </div>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <router-link class="mui-navigate-right" to="/person/discount">
                        优惠通知
                    </router-link>
                </li>
                <li class="mui-table-view-cell">
                    <router-link class="mui-navigate-right" to="/person/password">
                        密码重置
                    </router-link>
                </li>
                <li class="mui-table-view-cell">
                    <router-link class="mui-navigate-right" to="/person/question">
                        问题反馈
                    </router-link>
                </li>
            </ul>
            <ul class="mui-table-view" style="margin-top: 25px;">
                <li class="mui-table-view-cell">
                    <router-link class="mui-navigate-right" to="/person/about">
                        关于吃喝玩乐
                    </router-link>
                </li>
            </ul>
            <ul class="mui-table-view" style="margin-top: 25px;">
                <li class="mui-table-view-cell">
                    <router-link style="text-align: center;color: #FF3B30;" to="/person/quit">
                        退出登录
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            sheetVisible:false,
            actions:[
                {name:'拍照',method:this.getCamera},
                {name:'从相册中选择',method:this.getPhoto},
            ]
        }
    },
    methods:{
        getCamera(){},
        getPhoto(){},
    }


}
</script>

<style lang="less" scoped>
    .personRouter-container {
        .mui-control-content {
            display: block;

            .mui-table-view-cell:after {
                right: 15px;
            }
            .mui-table-view:before,
            .mui-table-view:after{
                left: 15px;
                right: 15px;
            }

            .title {
                height: 200px;
                padding-top: 50px;

                .photo {
                    width: 100px;
                    height: 100px;
                    border: 1px solid #26a2ff;
                    box-shadow: #26a2ff 0 0 10px 5px;
                    border-radius: 50%;
                    margin: 0px auto;

                }
            }
        }
    }
</style>